﻿@model List<FTBS.Models.Entities.Film>
@{
    ViewBag.Title = "Trang chủ";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .description { 
  display: -webkit-box;
  max-width: 400px;
  
  margin: 0 auto;
  font-size: 12px;
  line-height: 1px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
    .limitName {
line-height:none;
   display: -webkit-box;
  margin: 0 auto;
  font-size: 12px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
    }
</style>
<body onload="getListObjectToShow()">

    <div style="display: inline-block;width:68%;margin-right:10px">
        <div class="carousel" id="carousel2" style="margin-left: 15px; margin-top: 3px">
             @if (Model.Count() > 0)
             {
                 foreach (var item in Model)
                 {
                     <div class="slide">
                         <img src="~/Image/FilmImage/Horizontal/@item.ImageURL" class="cover1" style="width:100%;height:400px" />
                     </div>
                 }
             }
        </div>
    </div>
    <div style="display:inline-block; height: 400px; width: 30%; background-color: black; margin-top: 3px;vertical-align:top;overflow-y:auto">
        <div style="margin-left: 10px; margin-top: 20px; height: 100%;">
            <div>
                <h3 style="color: white;display:inline-block">Phim hot trong tuần</h3>
            </div>
            <hr style="margin-top: -5px" />
            @if (Model.Count() > 0)
            {
                foreach (var item in Model)
                {
                <div style="display: block">
                    <a href="/Home/Detail?id=@item.FilmId">
                        <div style="display:inline-block;width:30%;vertical-align:top;" >
                            
                                <img src="~/Image/FilmImage/@item.ImageURL" style="height: 80px; width: 90%" />
                            
                        </div>
                        <div style="display:inline-block; height: 83px; width: 65%;">
                            <p style="color: white; font-size: 20px">@item.Name</p>
                            <p class="description" style="color: white; font-size: 12px">@item.Description</p>
                        </div>
                    </a>
                </div>
                }
            }
        </div>
    </div>

    <!-- THỂ LOẠI PHIM HAY XEM -->
    <div id="filmSuggestionCustomer">
        @Html.Partial("FilmsSuggestion", new List<FTBS.Models.Entities.Film>())
    </div>

    <!-- CÁC PHIM ĐANG KHUYẾN MÃI -->
    <div>
        @Html.Partial("FilmsPromotion", (List<FTBS.Models.Entities.Concert.FilmConcertEntity>)ViewBag.ListFilmPromotion)
    </div>

    <!-- CÁC PHIM ĐANG CHIẾU -->
    <div id="partialFilmShowing">
        @Html.Partial("FilmShowing", (List<FTBS.Models.Entities.Film>)ViewBag.ListFilmShowing)
    </div>

    @*<!-- PHIM ĐƯỢC XEM NHIỀU -->
    <div>
        @Html.Partial("MostShowingFilms", (List<FTBS.Models.Entities.Film>)ViewBag.ListMostShowingFilms)
    </div>*@

    @*PHIM SẮP CHIẾU*@
    <div id="partialFilmCommingSoon">
        @Html.Partial("FilmsCommingSoon", (List<FTBS.Models.Entities.Concert.FilmConcertEntity>)ViewBag.ListFilmCommingSoon)
    </div>

    <!-- RẠP GẦN NHÀ -->
    <div id="partialNearTheater">
        @Html.Partial("NearestTheater", new List<FTBS.Models.Entities.Concert.TheaterConcertEntity>())
    </div>
</body>


<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script type="text/javascript">
    function getListObjectToShow() {
        //Get list nearest theater
        getLocation();
        //Get list film suggest
        loadSuggestionForCustomer();
    }

    function loadSuggestionForCustomer() {
        var listCategoryResult = JSON.stringify(getLocalStorageViewResult());
        $.ajax({
            url: "/Home/GetListFilmSuggestionCustomer",
            type: "GET",
            data: { listCategoryView: listCategoryResult },
            success: function (data) {
                $('#filmSuggestionCustomer').html(data);
            },
            error: function (data) {
                alert("fail");
            }
        });
    }

    function getLocation() {
        navigator.geolocation.getCurrentPosition(callback);
    }

    function callback(position) {
        var listPosition = JSON.stringify(getPositionLocalStorage());
        if (listPosition == "null") {
            $.ajax({
                url: "/Home/NearestTheater",
                type: "POST",
                data: { latitude: position.coords.latitude, longitude: position.coords.longitude },
                success: function (data) {
                    $('#partialNearTheater').html(data);
                },
                error: function (data) {
                    alert("fail");
                }
            });
        }
        else {
            var listNearestTheater = JSON.stringify(getNearestTheaterListLocalStorage());
            $.ajax({
                url: "/Home/NearestTheaterExisted",
                type: "POST",
                data: { latitude: position.coords.latitude, longitude: position.coords.longitude, listPositionExist: listPosition, listNearestTheaterExisted: listNearestTheater },
                success: function (data) {
                    $('#partialNearTheater').html(data);
                },
                error: function (data) {
                    alert("fail");
                }
            });
        }
    }

    $(function () {
        $("#carousel2").carousel({
            width: "100%",
            height: 400,
            effect: 'slide',
            markers: {
                show: true,
                type: 'cycle',
                position: 'bottom-right'
            }
        });
    })

</script>



